<template>
  <div class="simple-member-center">
    <h1>会员中心</h1>
    
    <div v-if="currentUser">
      <p>欢迎，{{ currentUser.username }}！</p>
      <p>会员状态: {{ currentUser.isMember ? '已开通' : '未开通' }}</p>
      <p v-if="currentUser.isMember">会员等级: {{ currentUser.memberLevel }}</p>
      <p v-if="currentUser.isMember && currentUser.memberExpires">
        有效期至: {{ formatDate(currentUser.memberExpires) }}
      </p>
    </div>
    <div v-else>
      <p>请先登录</p>
      <router-link to="/login">去登录</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentUser } from '@/utils/auth'

const currentUser = ref(null)

function formatDate(dateString) {
  if (!dateString) return '未知'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 更新用户信息
function updateUser() {
  currentUser.value = getCurrentUser()
  console.log('用户信息:', currentUser.value)
}

onMounted(() => {
  updateUser()
  
  // 监听认证状态变化
  window.addEventListener('auth-changed', updateUser)
})
</script>

<style scoped>
.simple-member-center {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

h1 {
  margin-bottom: 30px;
  color: var(--accent);
}

p {
  font-size: 18px;
  margin-bottom: 15px;
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}
</style>